<template>
  <Form ref="formRef" :model="formData" :rules="rules" :label-width="120">
    <FormItem label="所属产品：" prop="productKey">
      <Select
        v-model="formData.productKey"
        placeholder="请选择所属产品..."
        @on-change="handleProductChange"
      >
        <Option
          v-for="item in productList"
          :value="item.productKey"
          :key="item.productKey"
          :label="item.productName"
        />
      </Select>
    </FormItem>

    <FormItem label="是否接入零线：" prop="lineToZeroLine">
      <i-switch v-model="formData.lineToZeroLine">
        <span slot="open">是</span>
        <span slot="close">否</span>
      </i-switch>
    </FormItem>

    <FormItem
      label="零线设备显示："
      prop="showZeroLine"
      v-if="!formData.lineToZeroLine"
    >
      <i-switch v-model="formData.showZeroLine">
        <span slot="open">是</span>
        <span slot="close">否</span>
      </i-switch>
    </FormItem>

    <FormItem
      label="零线设备名称："
      prop="childDeviceName"
      v-if="formData.showZeroLine && !formData.lineToZeroLine"
    >
      <Input
        v-model="formData.childDeviceName"
        placeholder="请输入零线设备名称..."
        clearable
      />
    </FormItem>

    <FormItem label="是否启用：" prop="enable">
      <i-switch v-model="formData.enable">
        <span slot="open">On</span>
        <span slot="close">Off</span>
      </i-switch>
    </FormItem>
  </Form>
</template>
<script>
import { generateRules } from "../utils";
import { getIotProductList as httpGetIotProductList } from "@/api";
export default {
  data() {
    return {
      productList: [],
      formData: {
        productKey: "",
        enable: true,
        lineToZeroLine: false,
        showZeroLine: false,
        childDeviceName: ""
      },
      rules: generateRules()
    };
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    collectType: String
  },
  mounted() {
    this.init();
  },
  // watch: {
  //   form: {
  //     deep: true,
  //     handler(value, oldValue) {
  //       if (!(JSON.stringify(value) === JSON.stringify(oldValue))) {
  //         this.init()
  //       }
  //     }
  //   }
  // },
  methods: {
    init() {
      if (JSON.stringify(this.form) === "{}") return;
      httpGetIotProductList({ size: 1000 }).then(res => {
        if (res.code === 200) {
          this.productList = res.data;
        } else {
          this.productList = [];
        }
      });
    },
    handleProductChange() {},
    validate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          callback(valid, {
            formData: Object.assign({}, this.form, this.formData)
          });
        }
      });
    }
  }
};
</script>
